import React from 'react'
import './Hero.css';

import Search from './Search';
import HeroList from './HeroList';
import { useNavigate } from 'react-router-dom';
import KeepAlive from 'react-activation';
export default function Hero() {
  //获得 navigate 函数
  let navigate = useNavigate();

  return (
    <div className="hero-container">
      <h1>英雄列表 <button className="btn btn-danger btn-sm" onClick={() => {
        navigate(1);
      }}>前进</button></h1>
      <hr />
      <Search  />
      <hr />
      <KeepAlive>
        <HeroList  />
      </KeepAlive>
    </div>
  )
}
